<template>
<div class="editsku-main">

    <el-dialog title="编辑SKu商品" :visible.sync="dialogVisible" width="90%" :before-close="dialogBeforeClose">
        <div>
            <!-- {{productId=id}} -->
            <el-button  type="primary" @click="addSku">新增Sku</el-button>
            <el-alert v-if="tips" title="sorry！！！该商品无库存信息" type="error" style="font-size:20px;">
            </el-alert>
            <!-- 生成的sku列表内容 -->
            <el-table   :data="pmsSkuStockList" style="width: 100%;margin-top:20px;" border >
                <el-table-column header-align="center" align="center" type="index" label="序号" :width="50" />
                <!-- 商品图片 -->
                <el-table-column header-align="center" align="center" label="图片" width="150">
                    <template slot-scope="scope">
                        <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1">
                            <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar">
                            <div v-else class="el-icon-plus avatar-uploader-icon" @click="uploadImg(scope.row.id)"></div>
                        </el-upload>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" label="颜色" width="90">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.spData[0].value" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="大小" width="90">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.spData[1].value" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="价格" width="120">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="促销价格" width="120">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.promotionPrice" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" width="120" label="库存">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stock" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" width="120" label="预警库存">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.lowStock" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="锁定库存" width="120">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.lockStock" placeholder="" :disabled="disabled"></el-input>
                    </template>
                </el-table-column>
                <!-- 删除和编辑 -->
                <el-table-column fixed="right" label="操作" width="200" class="btns" header-align="center" align="center">
                    <template slot-scope="scope">
                        <!-- 删除还是要根据下标删除--- -->
                        <el-button size="small" type="primary" v-if="scope.row.newList" @click="goAddSku(scope.row)">保存</el-button>

                        <el-button type="primary" v-else icon="el-icon-edit" circle  @click="goEditProduct(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelProduct(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="submitSku">确 定</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>
// 这是子组件啊
import {
    getToken
} from '@/utils/myAuth'

import {
    getSkusByProductId,
    delSku,
    addProductSkus,
    updateSkuInfo
} from '@/api/product/sku/index'
export default {
    name: 'EditSku',
    components: {

    },
    data() {
        return {
            pmsSkuStockList: [

            ],
            imgId: '',
            tips: '',

            // 弹窗的显示和隐藏
            // dialogVisible:true,
            dialogFormVisible: false,

            disabled:false,

            id:this.productId
            
           

        };
    },
    // 
    props: ['dialogVisible', 'productId'],

    computed: {
        headers() {
            return {
                token: getToken()
            }
        },
        // id(){
        //     return this.productId
        // }
      
    },
    watch:{
        productId(val){
            this.id=val
        }

    },
    created() {
      
       console.log(this.id);
       this.init()
    //    if(this.id){
    //         this.init()
    //    }

    },
 
    // 组件已经出现在页面中，数据、真实dom都已经处理好
    mounted() {
    },
    updated(){
            // this.init()

    },
     
    methods: {
        init(){

              getSkusByProductId(this.id).then(res => {
            if (res.success) {
                if (res.data.items.length == 0) {
                    this.tips = true
                    
                } else {
                    this.tips =false
                    res.data.items.forEach(el => {
                        el.spData = JSON.parse(el.spData)
                    })
                    this.pmsSkuStockList = res.data.items
                    console.log(this.pmsSkuStockList);

                }
            }

        })

        },
        beforeAvatarUpload1() {

        },
        // 商品库存图片上传成功
        handleAvatarSuccess1(res) {
            console.log(res);
            if (res.success) {
                //    this.imageUrl=res.data.fileUrl
                this.pmsSkuStockList.forEach(el => {
                    if (el.id == this.imgId) {
                        el.pic = res.data.fileUrl
                    }
                })
            }

        },
        uploadImg(id) {
            console.log(id);
            this.imgId = id

        },
        guid() {
            function randomNumber() {
                return Math.floor(Math.random() * 1000 + 10)
            }
            return randomNumber()
        },
       
        // 删除商品库存信息 
        goDelProduct(id) {
            this.$confirm('此操作将永久删除该库存信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delSku(id).then(res => {
                    if (res.success) {
                        this.init()
                        this.$message.success('成功删除该库存信息')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 编辑库存
        goEditProduct(row){
            row.spData=JSON.stringify(row.spData)

            updateSkuInfo(row).then(res=>{
                if(res.success){
                    this.init()
                    this.$message.success('成功编辑')
                }else{
                    this.$message.error('sorry！编辑失败')
                }
            })


        },
        // 添加商品库存信息---应该直接添加到table表格中吧再添加个弹窗就……
        addSku() {
            const obj = {
                productId: this.productId,
                lockStock: '',
                lowStock: '',
                stock: '',
                pic: '',
                price: '',
                promotionPrice:'',
                sale: '',
                skuCode: '',
                spData: [{ 'key': '颜色', 'value': '' }, { 'key': '容量', 'value': '' }],
                id:this.guid(),
                newList:true
            }
            this.pmsSkuStockList.push(obj)
        },
        // 保存数据
        goAddSku(row){
            // 删除最新数据的标识
            delete row.newList
        console.log(row);
            addProductSkus({
                ...row,
                spData:JSON.stringify(row.spData)

            }).then(res=>{
                console.log(res);
                if(res.success){
                    this.$message.success('新增sku成功了')
                }else{
                    this.$message.error('sorry！新增失败')
                }
            })



        },
      
        // 关闭弹窗
        // 子组件---父组件传值
        dialogBeforeClose() {
           this.$emit('closeDialog',false)
        },

        // 提交也是关闭弹窗
        submitSku() {
           this.$emit('closeDialog',false)
        },
        // 删除图片
        delSkuImg() {
            this.$confirm('确定删除该图片吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.newSku.pic = ''

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 30px;
}
 .avatar {
        width: 200px;
        height: 150px;
        display: block;
    }
</style>
